<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>加载天地图绽放级别</title>
	<script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>
	<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
</head>
<style type="text/css">
	#mapDiv{
		height:600px;
		margin:10px;
		border: 1px solid #ccc;
	}
	.opt_station_hover{
		background: rgb(77,103,130);
		font-size: 12px;
		width: 150px;
		height: 47px;
		border-radius: 5px;
	}
	.opt_station_hover_ul{
		list-style: none;
		margin: 0;
		padding: 0;
		line-height: 23px;
		text-indent: 4px;
		color: white;
		position: relative;
	}
	.opt_station_hover_ul li{
		list-style: none;
		margin: 0;
		padding: 0;
		overflow: hidden;
		height: 23px;
	}
	.opt_station_hover img{
		position: absolute;
		left: 50%;
		margin-left: -5px;
	}
	.opt_li_left{
		width: 65px;
		display: bolck;
		float: left;
		text-align: right;
	}

</style>
<body onload="">
	<style type="text/css">

	</style>
	<div id="mapDiv"></div>

	<script type="text/javascript">

		var map;
		var lnglats;//点数据，ajax获取
		var cenB,cenL,zoom;
		var markers = [];

		var lnglats = [
		{"B":"23.1","L":"113.3","PName":"1111","Status":1},
		{"B":"23.2","L":"113.4","PName":"2222","Status":1},
		{"B":"22.9","L":"113.1","PName":"3333","Status":3004},
		{"B":"23.7","L":"113.8","PName":"第四个点","Status":1},
		{"B":"23.8","L":"113.5","PName":"第五个点","Status":1},
		{"B":"23.3","L":"113.2","PName":"第六个点","Status":1},
		{"B":"23.1","L":"113.7","PName":"7777","Status":1},
		{"B":"23.5","L":"113.3","PName":"8888","Status":1}];


		// function loadData(){
		// 	$.ajaxSettings.async = false;
		// 	$.getJSON('php/loadIcon.php','', function(json, textStatus) {
		// 		lnglats = json;
		// 	});
		// 	$.ajaxSettings.async = true;
		// }
		//这是页面需要的数据。实际应用中常用ajax获取。坐标点状态。点的类型。点的名字。

		//设置中心点和缩放级别
		function setCenterAndZoom(lnglats){
			var maxl = lnglats[0].L,minl=lnglats[0].L,maxb=lnglats[0].B,minb=lnglats[0].B;
			$.each(lnglats,
				function(i, res) {
					if(res.L > maxl) maxl =res.L;
					if(res.L < minl) minl =res.L;
					if(res.B > maxb) maxb =res.B;
					if(res.B < minb) minb =res.B;
				});
			cenB =(parseFloat(maxb)+parseFloat(minb))/2;
			cenL= (parseFloat(maxl)+parseFloat(minl))/2;
			zoom = getZoom(maxl, minl, maxb, minb);
		}


		//通过经纬度缩放级别
		function getZoom(maxJ, minJ, maxW, minW) {
			if (maxJ == minJ && maxW == minW) return 13;
			var diff = maxJ - minJ;
			if (diff < (maxW - minW) * 2.1) diff = (maxW - minW) * 2.1;
			diff = parseInt(10000 * diff) / 10000;

			var zoomArr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13);
			var diffArr = new Array(180, 90, 45, 22, 11, 5.5, 2.75, 1.37, 0.68, 0.34, 0.17, 0.08, 0.04);

			for (var i = 0; i < diffArr.length; i++) {
				if ((diff - diffArr[i]) >= 0) {
					return zoomArr[i];
				}
			}
			return 14;
		}


		//加载基本地图和导航
		function loadMap(){
			try {
				map = new TMap("mapDiv"); //初始化地图对象
		        map.centerAndZoom(new TLngLat(cenL, cenB), zoom);//设置显示地图的中心点和级别
		        map.enableHandleMouseScroll(); //允许鼠标双击放大地图   
		    } catch(err) {
		    	alert('天地图加载不成功，请稍候再试！你可以先使用其他功能！');
		    }
		}

		//绘制多个marker。
		function drawTMakers(lnglats){
			markers.length = 0;
			if (lnglats.length != 0) {
				var     iconurl ='images/pointOnline.jpg';
				var     iconurl1 = 'images/pointOffline.jpg';
		       icon = new TIcon(iconurl, new TSize(20, 20), {anchor: new TPixel(12, 12)});//两种图标，根据status判断用哪一种。
		       icon1 = new TIcon(iconurl1, new TSize(20, 20), {anchor: new TPixel(12, 12)});

		       for (var i = 0; i < lnglats.length; i = i + 1) {
		       	if (lnglats[i].Status == 1) {
		       		markers[i]  = drawTMaker(lnglats[i],icon);
		       	} else {
		       		markers[i]  = drawTMaker(lnglats[i],icon1);
		       	}
		       	markers[i].id=i;
		       }
		   }
		}

		//往地图上添加一个marker。传入参数坐标信息lnglat。传入参数图标信息。
		function drawTMaker(lnglat,icon){
			var marker =  new TMarker(new TLngLat(lnglat.L, lnglat.B), {icon: icon});
			map.addOverLay(marker);
			return marker;
		}

		//把标注点名字画到地图上
		function loadText(){
			var label =[];//装点名图。
			if (lnglats.length != 0) {
				for (var i = 0; i < lnglats.length; i = i + 1) {
					var config = {
						text:lnglats[i].PName,
						offset:new TPixel(0,10),
						position:new TLngLat(lnglats[i].L,lnglats[i].B)
					};
        			label[i]=new TLabel(config);//创建地图文本对象
        			label[i].setAnchorPer([0.5,0]);//偏移量
        			label[i].setBorderLine (0);
        			map.addOverLay(label[i]);
        			$('.stationByNum').parent().css({
        				"padding":"0"
        			});
        		}
        	}
        }

        // loadData();//加载数据
        setCenterAndZoom(lnglats);//设置中心点和缩放级别。
        loadMap();//加载地图
        drawTMakers(lnglats);//绘制标注。
		loadText();//加载标点的名字


		/*
		 * 说明：本例中实现的方法是在不知道有官方接口的情况下自己做的实现。
		 * 可直接使用官方功能来实现  map.setViewport(view:Array<TLngLat>);
		 * 可查看本系列中其他例子中的做法。
		 */
	</script>
</body>
</html>